<template>
  <van-nav-bar
      title="非中介保证金"
      left-text="返回"
      left-arrow
      fixed
      @click-left="onClickLeft"
      dis/>

<!--  废话-->
  <div class="feihua">
    <p style="text-align: left">作为转租看的你</p>
    <p style="text-align: left">还在担心中介午休的打扰码？</p>
    <p style="text-align: right">作为求房源的你</p>
    <p style="text-align: right">还在担心变相得到中介费用与隐瞒？</p>
    <h5 style="text-align: center ;color:#706b6b ;margin-top: 14px ;margin-bottom: 10px">城市套路深 让我们互相监督 营造一个真诚的租客转租平台</h5>
  </div>
<!--  交钱-->
  <div class="jiao">
    <h4 style="background-color: black;color: white;margin-top: 0;margin-bottom:0;border-radius: 8px 8px 0px 0;padding-top: 8px;padding-bottom: 8px">已有{{count}}名小伙伴加入</h4>
    <h5 style="text-align: left;margin-top: 14px;margin-left: 14px;font-size: 15px;margin-bottom: 5px">保证金</h5>
    <span style="text-align: left ;margin-top: 10px"><h2 style="margin-top: 0;margin-left: 14px">100元</h2></span>
    <div class="jiaona">
      <van-button color="black" style="width: 76px;height: 30px" @click="jn" id="jiao">交纳</van-button>
    </div>
    <div style="position: absolute;margin-top: -14px;width: 350px;height: 1px;background-color: black;margin-left: 25px"></div>
    <p style="text-align: left;margin-top: 40px">规则</p>
    <p style="text-align: left">1.缴纳后既可体验微信/电话功能</p>
    <p style="text-align: left">2.退款需进行提前24小时申请审核无违规操作后退还;</p>
    <p style="text-align: left">3.若经用户举报并平台审核为中介则将保证金奖励于举报者;</p>
  </div>
  <van-popup v-model:show="show12" :style="{ padding: '64px' }">{{ count }}秒后返回网站首页</van-popup>
<!--  kkk-->
  <div class="kkk">
    <h1>以人为本，诚信经营</h1>
  </div>

</template>

<script setup>
import {useStore} from "../../pinia";

const onClickLeft = () => history.back();
import {ref} from "vue";
const store=useStore()
const show12=ref(false)
const count =ref(8532)
const jn = () => {
  show12.value=true
  count.value++
  store.user.jiaofei="已缴费"
  document.getElementById("jiao").innerText="已缴纳";
}


</script>


<style>
.kkk{
  position: absolute;
  width: 400px;
  top: 675px;
  left: 14px;

}
.jiaona{
  top: 80px;
  left: 300px;
  position: absolute;

}
.jiao{
  top: 239px;
  left: 14px;
  width: 400px;
  height: 311px;
  border-radius: 8px;
  position: absolute;
  background-color: #ffffff;
}

.feihua{
  position: absolute;
  top: 58px;
  left: 14px;
  border-radius: 8px;
  background-color: #ffffff;
  width: 400px;
  height: 169px;
}
p{
  color: #888888;
  margin: 6px 14px;
}
/* body{*/
/*  background-color: #dfdfdf;*/
/*}*/
</style>
